<template>
    <van-popup
        v-model="isShow"
        position="bottom"
        :style="{ height: '366px' }"
        class="ticket-info-container"
        @close="close"
        safe-area-inset-bottom
    >
        <div class="title-wrapper">
            <p class="title">派工详情</p>
            <span class="value">工单号：{{ ticket.orderId }}</span>
        </div>
        <p class="divider"></p>
        <div class="steps">
            <div v-if="ticket.dispatchedTime !== '-'" class="step">
                <p>
                    <span class="label">已派工</span>
                    <span class="icon"></span>
                    <span class="value">{{ ticket.dispatchedTime }}</span>
                </p>
                <p class="detail-wrapper">
                    <span class="label"></span>
                    <span class="divide-v"></span>
                    <span class="detail-label">
                        {{
                            `${ticket.company}，工程师${ticket.engineerName}，电话${ticket.engineerPhone}`
                        }}
                    </span>
                </p>
            </div>
            <div v-if="ticket.orderTime !== '-'" class="step">
                <p>
                    <span class="label">已预约</span>
                    <span class="icon"></span>
                    <span class="value">{{ ticket.orderTime }}</span>
                </p>
                <p class="detail-wrapper">
                    <span class="label"></span>
                    <span class="divide-v"></span>
                    <span class="detail-label">
                        已预约上门时间 {{ ticket.visitTime }}
                    </span>
                </p>
            </div>
            <div v-if="ticket.startTime !== '-'" class="step bottom">
                <p>
                    <span class="label">服务开始</span>
                    <span class="icon"></span>
                    <span class="value">{{ ticket.startTime }}</span>
                </p>
            </div>
            <div v-if="ticket.finishTime !== '-'" class="step">
                <p>
                    <span class="label">完工确认</span>
                    <span class="icon"></span>
                    <span class="value">{{ ticket.finishTime }}</span>
                </p>
            </div>
        </div>
    </van-popup>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";

Vue.use(Popup);

export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        ticket: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            isShow: false,
        };
    },
    watch: {
        show(val) {
            this.isShow = val;
        },
    },
    created() {},
    mounted() {},
    methods: {
        close() {
            this.$emit("close");
        },
    },
};
</script>

<style lang="less" scoped>
.ticket-info-container {
    width: 100%;
    height: 366px;
    background: #ffffff;
    border-radius: 16px 16px 0px 0px;
    border: 1px solid #979797;
    padding: 20px 16px;
    box-sizing: border-box;
    overflow-y: hidden;

    p {
        margin: 0;
    }
    span {
        display: inline-block;
        vertical-align: middle;
    }

    .divider {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        margin-top: 15px;
    }
    .title-wrapper {
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #242728;
            line-height: 22px;
        }
        .value {
            font-size: 13px;
            font-weight: 400;
            color: #656e71;
            line-height: 18px;
            margin-top: 4px;
        }
    }
    .steps {
        padding: 20px 0;
        box-sizing: border-box;
        .step {
            .label {
                font-size: 14px;
                font-weight: bold;
                color: #2a425c;
                line-height: 20px;
                display: inline-block;
                width: 56px;
                text-align: right;
                margin-right: 14px;
            }
            .icon {
                width: 8px;
                height: 8px;
                background: #ffffff;
                border: 2px solid #6483a5;
                border-radius: 50%;
                display: inline-block;
                margin-right: 14px;
                vertical-align: middle;
            }
            .value {
                font-size: 14px;
                font-weight: bold;
                color: #2a425c;
                line-height: 20px;
            }
            .divide-v {
                width: 2px;
                height: 54px;
                background: #91acc8;
                display: inline-block;
                margin-left: 4px;
            }
            .detail-label {
                vertical-align: top;
                font-size: 13px;
                font-weight: 400;
                color: #8995a2;
                line-height: 18px;
                margin-left: 17px;
                width: calc(100% - 94px);
                display: inline-block;
            }
            .detail-wrapper {
                margin: 7px 0 1px 0;
            }

            .dot-v {
                border: none;
                border-right: 2px dashed #c5c7ca;
                width: 2px;
                height: 54px;
                display: inline-block;
                margin-left: 2px;
            }

            .red {
                border: 3px solid #fa6b6b;
            }
        }
        .bottom {
            margin-bottom: 28px;
        }
    }
}
</style>
<style lang="less"></style>
